<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .marquee-box {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #eee;
            overflow: hidden;
        }
        .marquee-content {
            display: flex;
        }
        .marquee-item {
            white-space: nowrap;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div class="marquee-box">
        <div class="marquee-content">
            <div class="marquee-item">内容001</div>
            <div class="marquee-item">内容002</div>
            <div class="marquee-item">内容003</div>
            <div class="marquee-item">内容004</div>
            <div class="marquee-item">内容005</div>
            <div class="marquee-item">内容006</div>
            <div class="marquee-item">内容007</div>
            <div class="marquee-item">内容008</div>
            <div class="marquee-item">内容009</div>
            <div class="marquee-item">内容010</div>
            <div class="marquee-item">内容011</div>
            <div class="marquee-item">内容012</div>
            <div class="marquee-item">内容013</div>
            <div class="marquee-item">内容014</div>
            <div class="marquee-item">内容015</div>
            <div class="marquee-item">内容016</div>
            <div class="marquee-item">内容017</div>
            <div class="marquee-item">内容018</div>
            <div class="marquee-item">内容019</div>
            <div class="marquee-item">内容020</div>
        </div>
    </div>
    <script>
        function marqueeMove(){
            const marquee = document.querySelector(".marquee-box")
            const content = marquee.querySelector(".marquee-content")
            // 获取浏览器宽度 
            // innerWidth: 返回浏览器窗口内部宽度
            // document.documentElement.clientWidth：返回html文档根元素内部的宽度
            // document.body.clientWidth：返回body元素的内部宽度
            let width = window.innerWidth ||
                    document.documentElement.clientWidth ||
                    document.body.clientWidth;
            // 设置内容默认移动位置 在屏幕最右边(刚好隐藏掉)
            let moveX = width
            // content.style.transform = `translateX(${moveX}px)`
            // 走完一次所有内容的宽度 = 浏览器宽度 + 内容宽度
            // 内容宽度
            let contentW = 0
            // 把伪数组转换为数组
            let allContent = [...content.children]
            allContent.forEach(el=>{
                // 计算内容总宽度
                contentW += el.offsetWidth
            })
            console.log(72,contentW,width)
            // 移动函数
            let timer = null
            function move(){
                timer = setInterval(()=>{
                    moveX--
                    content.style.transform = `translateX(${moveX}px)`
                    // 添加判断moveX<0 防止 moveX初始值大于内容宽度的情况
                    if(moveX<0&&Math.abs(moveX) >= contentW){
                        // 移动的值大于 内容的宽度进入下一轮滚动
                        moveX = width
                    }
                },1000/60)
            }
            move()

            // 鼠标移入暂停移动
            marquee.addEventListener("mouseenter", function(){
                clearInterval(timer)
            })
            // 鼠标离开 继续移动
            marquee.addEventListener("mouseleave", function(){
                move()
            })
        }
        marqueeMove()
    </script>
</body>
</html>